"use strict"

Game.GUI = {
	
	init: function(game) {
		this._game = game
		this._parent = document.getElementById("gui")
		this._infoParent = document.getElementById("gameInfo")
		
		//set up player turn indicator
		this._p1 = document.createElement("p")
		this._p1.textContent = "Player 1"
		this._parent.appendChild(this._p1)
		
		this._p2 = document.createElement("p")
		this._p2.textContent = "Player 2"
		this._parent.appendChild(this._p2)
		
		//set up user log
		this._logdiv = document.createElement("div")
		this._logdiv.className = "userlog"
		this._parent.appendChild(this._logdiv)
	},
	
	setPlayers: function(game) {
		this._p1.textContent = game.players[0]
		this._p2.textContent = game.players[1]
	},
	
	initMatcher: function() {
		var parent = document.getElementById("gameMatcherOptions")
		
		var inp = document.createElement("input")
		inp.type = "text"
		inp.width = 30
		inp.placeholder = "gameId"
		inp.value = "player1.player2.123"
		parent.appendChild(inp)
		
		var inp2 = document.createElement("input")
		inp2.type = "text"
		inp2.width = 30
		inp2.placeholder = "localPlayer.num"
		inp2.value = 1
		parent.appendChild(inp2)
		
		//onchange values
		inp.onchange = function() {
			Game.game.gameId = inp.value
			Game.GUI.userLog("gameId changed to " + inp.value)
		}
		
		inp2.onchange = function() {
			var myval = parseInt(inp2.value, 10)
			if (myval === 1 || myval === 2) {
				Game.localPlayer.num = myval
				Game.GUI.userLog("localPlayer.num changed to " + myval)
			} else {
				Game.GUI.userLog("invalid player num: must be '1' or '2'")
			}
		}
	},
	
	draw: function() {
		//(re)set the names of the players, if they are set
		if (this._game.players) {
			this._p1.textContent = this._game.players[0]
			this._p2.textContent = this._game.players[1]
		}
		
		//highlight player turn appropriate
		if (this._game.turn == 1) {
			this._p1.className = "highlighted"
			this._p2.className = ""
		} else if (this._game.turn == 2) {
			this._p1.className = ""
			this._p2.className = "highlighted"
		}
		
		//show game info
		this._drawGameInfo()
	},
	
	_drawGameInfo: function() {
		//clear info already in there
		while (this._infoParent.hasChildNodes()) {
			this._infoParent.removeChild(this._infoParent.firstChild)
		}
		
		//if there is no gameId set, assume no game info exists yet and abandon draw
		if (!this._game.gameId)  return
		
		
		//create headers
		var p = document.createElement("p")
		p.className = "headings"
		p.innerHTML = [ "gameId:", "Turn:", "TurnCount:", "Winner:" ].join("<br/>")
		this._infoParent.appendChild(p)
		
		//create content
		var p = document.createElement("p")
		p.innerHTML = [
			this._game.gameId,
			this._game.turn,
			this._game.turnCount,
			this._game.winner
		].join("<br/>");
		this._infoParent.appendChild(p)
	},
	
	//logs gameplay errors and notices to the user
	userLog: function(str) {
		if (typeof str !== "string") {
			throw str
		}
		
		this._logdiv.innerHTML += "<p>" + str + "</p>"
		this._logdiv.scrollTop = this._logdiv.scrollHeight
	}
	
}